<template>
  <div>
    <el-card class="box-card">
      <el-select v-model="value" placeholder="请选择" @change='selectChange'>
        <el-option v-for="item in options" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 60px;" @click="addBanner">新增</el-button>
      <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
        <el-table-column prop="createTime" label="创建日期">
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image style="width: 100%; height: 100px" :src="scope.row.img" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="页面">
        </el-table-column>
        <el-table-column prop="second" label="轮播速度（s）">
        </el-table-column>
        <el-table-column prop="target" label="链接">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editBanner(scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除？" @confirm="delBanner(scope.row.id)">
              <el-button slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>
            <!-- <el-button type="text" size="small" @click="delBanner(scope.row.id)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="info.page"
          :page-size="info.pageNum" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog :title="showEdit ? '编辑' : '新增'" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="页面选择" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择页面">
            <el-option label="新闻首页" value="新闻首页"></el-option>
            <el-option label="政策分析" value="政策分析"></el-option>
            <el-option label="名企名品" value="名企名品"></el-option>
            <el-option label="专家服务" value="专家服务"></el-option>
            <el-option label="专业知识" value="专业知识"></el-option>
            <el-option label="违规曝光" value="违规曝光"></el-option>
            <el-option label="行业资讯" value="行业资讯"></el-option>
            <el-option label="产品召回" value="产品召回"></el-option>
            <el-option label="召回详情" value="召回详情"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传图片" prop="img">
          <el-upload list-type="picture-card" :action="action" :show-file-list="false" :headers="headers"
            :on-success="successFile" :before-upload="beforeAvatarUpload" name="files">
            <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播速度" prop="second" style="width: 360px;">
          <el-input type="text" v-model="ruleForm.second">
            <template slot="append">s</template>
          </el-input>
        </el-form-item>
        <el-form-item label="跳转模式" prop="model">
          <el-radio-group v-model="ruleForm.model">
            <el-radio label="1">站内跳转</el-radio>
            <el-radio label="2">站外跳转</el-radio>
            <el-radio label="3">无跳转</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文章选择" prop="target" v-if="ruleForm.model == '1'">
          <el-select v-model="ruleForm.target" placeholder="请选择文章">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="轮播链接" prop="target" style="width: 360px;" v-if="ruleForm.model == '2'">
          <el-input type="text" v-model="ruleForm.target">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">{{ showEdit ? '保存' : '确定' }}</el-button>
          <el-button v-if="showEdit" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import { getBanners, findArticleDown, saveBanner, delBanner } from "@/request/supervisionCenterApi.js"
export default {
  data() {
    return {
      options: [],
      value: '',
      tableData: [],
      action: 'https://bbgy.cpzsyun.com:82/api/plant/file/upload',
      headers: {
        common: {
          token: JSON.parse(window.sessionStorage.getItem("token"))
        }
      },
      dialogVisible: false,
      info: {
        page: 1,
        pageNum: 5,
        type: "",
        companyId: localStorage.getItem("companyId")
      },
      total: 0,
      showEdit: false,
      rules: {
        second: [
          { required: true, message: '请输入轮播速度', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择页面', trigger: 'change' }
        ],
        img: [
          { required: true, message: '请至少选择一个张图片', trigger: 'blur' }
        ],
        model: [
          { required: true, message: '请选择跳转模式', trigger: 'change' }
        ],
        target: [
          { required: true, message: '请填写链接', trigger: 'blur' }
        ]
      },
      showImg:'https://bbgy.cpzsyun.com:82/api/plant/file/show/',
      ruleForm: {
        second: '',
        type: '',
        img: "",
        model: '',
        target: '',
      },
    }
  },
  mounted() {
    console.log(axios.defaults.baseURL)
    this.getBanners()
    // this.getlist()
  },
  methods: {
     async selectChange(type){
         this.info.type = type
         let res = await getBanners(this.info)
         this.tableData = res.data.content
     },
    async getBanners() {
      let res = await getBanners(this.info)
      console.log(res)
      this.tableData = res.data.content
      this.total = res.data.totalElements
      this.options = this.tableData.map(item=>item.type)
      this.options = Array.from(new Set(this.options))
    },
    async getlist() {
      let res = await findArticleDown()
      console.log(res)
      this.options = res.data.map((v) => {
        return {
          value: v.id,
          label: v.title
        }
      })
    },
    handleCurrentChange(val) {
      this.info.page = val
      console.log(`当前页: ${val}`);
      this.getBanners()
    },
    addBanner() {
      console.log(this.ruleForm)
      this.showEdit = false
      this.dialogVisible = true
    },
    editBanner(row) {
      console.log(row)
      this.showEdit = true
      this.ruleForm = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    successFile(res, file) {
      console.log(res, file)
      this.ruleForm.img = this.showImg + res.data.fileName
    },
    beforeAvatarUpload(file) {

    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(this.ruleForm)
          let res = await saveBanner(this.ruleForm)
          console.log(res)
          if (res.code == 200) {
            this.$message.success('修改成功')
            this.getBanners()
            this.dialogVisible = false
          }


        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async delBanner(id) {
      let res = await delBanner(id)
      if (res.code == 200) {
        this.$message.success('删除成功')
        this.getBanners()
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClose() {
      console.log(1)
      this.ruleForm = {
        second: '',
        type: '',
        img: "",
        model: '',
        target: '',
      }
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.box-card {
  width: 100%;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.avatar img {
  display: block;
  width: 100%;
  height: 100%;
}

.pagination-box {
  width: 100%;
  padding: 20px;

  .el-pagination {
    text-align: right;
    margin-right: 200px;
    margin-top: 40px;
  }
}
</style>
